<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <Yq-header v-if="isShowHeader"></Yq-header>
    <div class="flexBg" :style="flexBgStyle">
      <flexbox :gutter="0">
        <flexbox-item><div class="flex-demo" >
          <img src="../../../assets/images/user/pic_xxt_fxym_top_01@2x.png" style="width: 100%;">
          <span style="display: block;border-top: solid 1px white;height: 1px;margin-top: -7px;"></span>
        </div></flexbox-item>
      </flexbox>
      <flexbox :gutter="0" style="margin: 0px auto 20px auto;padding-top: 20px;">
        <flexbox-item><div class="flex-demo">
          <img :src=avatar alt="用户头像" style="width: 60px;height: 60px;border-radius: 50%;">
          <p style="font-weight: bold;font-size: 15px;">{{nick}}</p>
          <p style="line-height: 30px;font-size: 12px;">您的好友{{nick}}邀请您使用孝行通</p>
          <p style="line-height: 50px;font-size: 15px;">积分<span style="font-size: 20px;">当钱花</span> 邀友<span style="font-size: 20px;">赚现金</span></p>
          <span style="display: block;border-top: solid 1px white;height: 1px;"></span>
        </div></flexbox-item>
      </flexbox>
      <flexbox :gutter="0">
        <flexbox-item>
          <div style="text-align: center;">
            <!--<qrcode value="../../../assets/images/user/shareCode.jpg" type="img" style="width: 100px;"></qrcode>-->
            <img src="../../../assets/images/user/shareCode.jpg" style="width: 100px;height: 100px;">
          </div>
        </flexbox-item>
        <flexbox-item>
          <div style="text-align: center;">
            <img src="../../../assets/images/user/zhiwen@2x.png" style="width: 100px;height: 100px;">
          </div>
        </flexbox-item>
      </flexbox>
      <p style="color: white;font-size: 14px;text-align: center;margin-top: 10px;">长按识别二维码，马上使用孝行通</p>
    </div>
  </div>
</template>

<script>
  import { Group, Cell, Flexbox, FlexboxItem, Divider, XButton, Qrcode, Alert } from 'vux'
  import * as types from '../../../store/types'
  import * as urls from '../../../api/urls'

  export default {
    components: {
      Group,
      Cell,
      Flexbox,
      FlexboxItem,
      Divider,
      XButton,
      Qrcode,
      Alert
    },
    data () {
      return {
        isShowHeader: false,
        userId: '',
        uid: '',
        alertShow: {
          showmsg: false,
          msg: ''
        },
        flexBgStyle: 'height: 200px;',
        avatar: '',
        nick: '',
        invitationNum: 5,
        invitationList: [
          {
            src: '../../../../static/images/userImg.png',
            name: '王小明',
            phone: '13800000000'
          }, {
            src: '../../../../static/images/userImg.png',
            name: '王小明',
            phone: '13800000000'
          }, {
            src: '../../../../static/images/userImg.png',
            name: '王小明',
            phone: '13800000000'
          }
        ]
      }
    },
    methods: {
      onClick (i) {
        console.log(i)
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      },
      getUserInfo () {
        let that = this
        that.http(urls.userIndex, {userId: this.uid}, function (res) {
          if (res.status === 100) {
            that.nick = String(res.data.user.nick)
            that.avatar = res.data.user.avatar
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      getQueryString (name) {
        let userId = window.location.href.substr('userId='.length + window.location.href.indexOf('?') + 1, window.location.href.length)
        return userId
      },
      diyweixinfn4 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t6&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '邀请分享', // 分享标题
          desc: '孝行通.微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: that.avatar, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: that.avatar, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      document.getElementsByClassName('weui_tabbar')[0].style.display = 'none'
      document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '0'
      if (this.$store.state.userInfo.id === '' || this.$store.state.userInfo.id === null || this.$store.state.userInfo.id === undefined) {
        let userId = window.location.href.replace(/.*userId=(\w*)&?.*/, '$1')
        let uid = window.location.href.replace(/.*uid=(\w*)&?.*/, '$1')
        this.userId = userId
        this.uid = uid
        if (this.userId !== '' && this.userId !== null && this.userId !== undefined) {
          this.$store.commit(types.USER_INFO, {id: this.userId, uid: this.uid})
          this.getUserInfo()
          this.flexBgStyle = 'height:' + document.body.clientHeight + 'px'
          this.weixinfn4()
        } else {
          let url = window.location.origin
          window.location.href = url + '/api/wxAuth/index?type=t1'
        }
      } else {
        this.userId = this.$store.state.userInfo.id
        this.uid = this.$store.state.userInfo.uid
        this.getUserInfo()
        this.flexBgStyle = 'height:' + document.body.clientHeight + 'px'
        this.$wechat.showOptionMenu()
        this.diyweixinfn4()
      }
    }
  }
</script>

<style scoped="scoped">
  .flex-demo {
    text-align: center;
    background-clip: padding-box;
  }
  .flex-demo>p{
    text-align: center;
    color: white;
    font-size: 14px;
  }
  .flex-userInfo >p{
    color: white;
    text-align: left;
    line-height: 28px;
    font-size: 14px;
  }
  .flexBg{
    background: url("../../../assets/images/user/yqhybj.png");
    background-size: contain;
  }
</style>
